<template>
  <div class="main-content1">
    <control-bar>
      <div class="fr" style="justify-content: space-between; width: 100%">
        <div class="fr" style="height: 35px">
          <!-- <n-input v-model:value="searchKeywords" placeholder="请输入关键字"></n-input>
          <n-button type="primary" @click="getImgList">搜索</n-button>
          &nbsp;&nbsp;&nbsp;&nbsp; -->
          <img
            src="/yxrh/zuixin.png"
            alt=""
            @click="showMuluDialog = true"
            class="zuixindiv"
            style="width: 30px"
          />
        </div>

        <div class="frcc">
          <n-button type="primary" @click="showLujingDialog = true">
            <template #icon>
              <i class="fa fa-folder"></i>
            </template>
            路径导入</n-button
          >
          &nbsp; &nbsp;

          <el-popover
            placement="bottom"
            title="上传任务信息"
            :width="400"
            trigger="hover"
          >
            <el-descriptions :column="1" border>
              <el-descriptions-item label="任务1">已完成</el-descriptions-item>
              <el-descriptions-item label="任务1">进行中</el-descriptions-item>
              <el-descriptions-item label="任务1">失败</el-descriptions-item>
              <el-descriptions-item label="任务1">已完成</el-descriptions-item>
              <el-descriptions-item label="操作">
                <el-button type="primary" size="default" @click="1">清空</el-button>
              </el-descriptions-item>
            </el-descriptions>

            <template #reference>
              <el-upload
                class=""
                v-if="true"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="uploadFile"
              >
                <n-button type="primary" @click="showAddDialog = true">
                  <template #icon>
                    <i class="fa fa-upload"></i>
                  </template>
                  上传导入</n-button
                >
              </el-upload>
            </template>
          </el-popover>
        </div>
      </div>
    </control-bar>
    <main-content :height="60">
      <el-table
        :data="dataList"
        border
        stripe
        @selection-change="handleSelectionChange"
        :height="height - 155"
      >
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column align="center" label="名称" property="name" />
        <el-table-column
          align="center"
          label="缩略图"
          show-overflow-tooltip
          property="thumbnail"
        >
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="
                '/api/suoluetu/' +
                encodeURIComponent(scope.row.thumbnail.split('/').pop())
              "
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :hide-on-click-modal="true"
              :preview-teleported="true"
              :preview-src-list="[
                '/api/suoluetu/' +
                  encodeURIComponent(scope.row.thumbnail.split('/').pop()),
              ]"
              :initial-index="4"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="描述" property="desc" />
        <el-table-column
          align="center"
          label="影像路径"
          show-overflow-tooltip
          property="imgpath"
        />
        <el-table-column align="center" label="影像时间" property="imgtime">
          <template #default="scope">
            {{ dayjs.utc(scope.row.imgtime).utcOffset(8).format("YYYY-MM-DD") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="扩展字段" property="remark" />
        <el-table-column align="center" label="分辨率" property="resolution" />
        <el-table-column
          align="center"
          label="创建时间"
          show-overflow-tooltip
          property="createdAt"
        >
          <template #default="scope">
            {{
              dayjs.utc(scope.row.createdAt).utcOffset(8).format("YYYY-MM-DD HH:mm:ss")
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template #default="scope">
            <div class="frcc" v-if="true">
              <el-tooltip content="查看瓦片" placement="top" effect="dark">
                <!-- content to trigger tooltip here -->
                <el-button type="" size="small" @click="showtif(scope.row)"
                  >查看影像</el-button
                >
              </el-tooltip>
              <el-tooltip content="编辑数据" placement="top" effect="dark">
                <!-- content to trigger tooltip here -->
                <el-button type="" size="small" @click="showtif(scope.row)"
                  >编辑</el-button
                >
              </el-tooltip>
            </div>
            <div class="frcc" v-else>暂无操作</div>
          </template>
        </el-table-column>
      </el-table>
      <div style="" class="pagediv">
        <el-pagination
          v-model:current-page="pageNum"
          @current-change="loadData()"
          @size-change="loadData()"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          v-model:page-size="pageSize"
          :total="totalCount"
        ></el-pagination>
      </div>
    </main-content>
  </div>

  <!-- 路径导入弹窗 -->
  <el-dialog title="路径导入" v-model="showLujingDialog" width="50%" destroy-on-close>
    <lujingdaoru v-model:showLujingDialog="showLujingDialog"/>
  </el-dialog>

  <!-- 查看目录列表 -->
  <el-dialog title="目录列表" v-model="showMuluDialog" width="70%" destroy-on-close>
    <mubiaoliebiao v-model:showMuluDialog="showMuluDialog"  @ploadData="ploadData()"/>
  </el-dialog>

  <!-- 查看影像 -->
  <el-dialog
    title="查看影像"
    v-model="showTifDialog"
    top="50px"
    width="70%"
    destroy-on-close
  >
    <div style="width: 100%; height: 600px; position: relative">
      <earthview :itemOptions="selitem" v-if="showTifDialog" />
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="showTifDialog = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, nextTick, onMounted, reactive, watch } from "vue";
import { apiList } from "@/api/apiList";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

import earthview from "../../common/earthview.vue";

import mubiaoliebiao from "./mululiebiao.vue";

import { useWindowSize } from "@vueuse/core";

const { width, height } = useWindowSize();

import { useEarthStore } from "@/stores/earth";

let earthStore = useEarthStore();

dayjs.extend(utc);

onMounted(() => {
  loadData();
});

let pageSize = ref(10);
let totalCount = ref(10000);
let pageNum = ref(1);

let dataList = ref([]);

let selitem = {};

let showTifDialog = ref(false);
let showMuluDialog = ref(false);
let showLujingDialog = ref(false);

function showtif(params) {
  selitem = params;
  console.log(selitem);
  selitem.type = "loadtif";
  showTifDialog.value = true;
}

// 加载数据

function ploadData(params) {
  console.log(11111);
  loadData();
  showLujingDialog.value = false;
}

watch(
  () => earthStore.taskws.data,
  (n, o) => {
    loadData();
  }
);

function loadData() {
  let params = {
    maxFeatures: pageSize.value,
    startIndex: pageSize.value * (pageNum.value - 1),
    sortBy: "imgtime D",
  };
  apiList.shujuguanli.getYingxiangList(params).then(res => {
    console.log(res);

    dataList.value = res.features.map(item => {
      return {
        ...item.properties,
        item: item,
      };
    });

    totalCount.value = res.totalFeatures;
  });
}
</script>
<style lang="scss">
.el-checkbox.is-disabled {
  // background-color: #fff!important;
  .el-checkbox__inner {
    background-color: #9999 !important;
  }
}
.zuixindiv {
  cursor: pointer;
}
.pagediv {
  display: flex;
  flex-direction: row-reverse;
  padding: 0px 10px;
}
</style>
